<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">

	window.onload = function () {

		/*
			点击超链接以后，删除员工
		 */
		// 获取所有的超链接
		// var links = document.getElementsByTagName('a');
		var links = document.querySelectorAll('a');
		// 遍历links
		for(let i=0; i<links.length; i++){
			// 将当前元素的索引，作为对象的属性存储
			// links[i].index = i;
			// 为超链接绑定单击响应函数
			// (function (i) {
			// 	links[i].onclick = function () {
			// 		alert(i);
			// 		// 希望当点击哪个超链接，i就是哪个超链接的索引
			// 		// 点击第一个超链接i为0. 点击第二个超链接i为1，以此类推
			// 		// alert(this.index);
			//
			// 		return false;
			// 	};
			// })(i);

			links[i].onclick = function () {
				/*
					即使可以正常获取到i的值，下边的写法也是不正确的
						getElementsByTagName() 获取到的是一个实时更新的数组
							当删除或增加一个元素后，数组会实时更新，也就是元素的索引会发生变化
				 */
				var tr = links[i].parentNode.parentNode;
				var name = tr.getElementsByTagName('td')[0].innerHTML;
				if(confirm('确认删除【'+name+'】吗？')){
					tr.parentNode.removeChild(tr);
				}

				return false;
			};

		}

	};

</script>
</head>
<body>

	<table id="employeeTable">

		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="javascript:;">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="javascript:;">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<td><a href="deleteEmp?id=003">Delete</a></td>
		</tr>
	</table>

	<div id="formDiv">
	
		<h4>添加新员工</h4>

		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" name="email" id="email" />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton">
						Submit
					</button>
				</td>
			</tr>
		</table>

	</div>

</body>
</html>
